<template>
    <div class="main ad-position">
        <section style="padding-top: 0">
            <h4 class="title" v-text="`${positionName ? '【'+positionName+'】' + '的' : ''}广告列表`"></h4>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="标题" prop="adName"></el-table-column>
                <el-table-column align="center" label="开始时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.startTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="结束时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.endTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否启用" width="100">
                    <template slot-scope="scope">
                        <span v-text="scope.row.status == 1 ? '是' : '否'"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间">
                    <template slot-scope="scope">
                      <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="排序" prop="sort" width="80"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'adPositionDetail',
        props: {
            id: {
                default: ''
            }
        },
        data() {
            return {
                positionName: this.$route.query.name,
                list: [],
                listQuery: {
                    isPage: 1,
                    pageIndex: 1,
                    pageSize: 10,
                    aid: this.id
                },
                listTotal: 0,
                listLoading: false,
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-ad/ad/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            //切换每页条数
            handleSizeChange (value) {
                this.listQuery.pageSize = value;
                this.getList()
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageIndex = page;
                this.getList();
            },
        }
    }
</script>
